<template>
	<div class="gn_aside">
		<div class="gn_logobox"><img src="../../static/image/logo.png"></div>
		<i class="gn_asidebtn" :class="isCollapse? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'" @click="asideShow"></i>
		<el-menu
		default-active="1-4"
		class="el-menu-vertical-demo collapse"
		@open="handleOpen"
		@close="handleClose"
		:collapse="isCollapse"
		:unique-opened ='openeds' >
		   <div v-for="(item, inde) in menuList" :key="inde">
			   	<div>
				   <div v-if="Array.isArray(item.subset) && item.subset.length != 0">
					   <el-submenu :index="item.code">
							<template slot="title">
								<div @click="menuTo(item.code)">
									<i :class="item.url"></i>
									<span>{{item.name}}</span>
								</div>
							</template>
							<div v-if="Array.isArray(item.subset) && item.subset.length != 0">
								<el-menu-item-group>
									<el-menu-item :index="v.code" v-for="(v, i) in item.subset" :key="i" @click="menuTo(v.code)">{{v.name}}</el-menu-item>
								</el-menu-item-group>
							</div>
					   </el-submenu>
					</div>
					<div v-else>
						<el-menu-item :index="item.code" @click="menuTo(item.code)">
							<i :class="item.url"></i>
							<span slot="title">{{item.name}}</span>
						</el-menu-item>
					</div>
				</div>
		   </div>
		</el-menu>
	</div>
</template>
<script>
import bus from '@/api/bus'
import {
	getModels } from '@/api'
	export default {
		data(){
			return {
				isCollapse: false,
				openeds: true,
				menuList: [],
				activeOn:'1-4'
			}
		},
		created () {
			this.getModels()
		},
		methods: {
			getModels () {
				getModels().then(res => {
					let code = res.data.code
					if (code == 0) {
						let data = res.data.data
						this.menuList = data
						console.log(data)
					} else if (code == 1) {
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			handleOpen(key, keyPath) {//菜单打开事件
				//console.log(key, keyPath);
			},
			handleClose(key, keyPath) { //菜单关闭事件
				//console.log(key, keyPath);
			},
			asideShow(){//左侧导航是否收起
				if(this.isCollapse){
					this.isCollapse = false;
				}else{
					this.isCollapse = true;
				}
			},
			//点击左侧菜单路由跳转页面
			menuTo(e){ 
				let obj = {
					'1-1': '/home/companymesg',
					'1-2': '/home/staffmesg',
					'1-3': '/home/equipmentcompany',
					'1-4': '/home',
					'1-5': '/home/communication',
					'1-6': '/home/rask',
					'1-7': '/home/rask',
					'2-1': '/home/oncall',
					'2-2': '/home/history',
					'3-1': '/home/orderall?type=1',
					'3-2': '/home/orderall?type=2',
					'3-3': '/home/orderall?type=3',
					'3-4': '/home/orderall?type=0',
					'3-5': '/home/orderall?type=4',
					'3-6': '/home/orderall?type=5',
					'4': '/home/customer',
					'5': '/home/house',
					'6': '/home/supervise',
					'7': '/home/map'
				}
				if (obj[e] === '2-1') {
					bus.$emit('hideEvent', true)
				}
				bus.$emit('hideEvent', false)
				this.$router.push(obj[e])
			}
		}
	};

</script>
<style>
	.gn_aside{position:relative;height:100%;overflow-y:auto;background:#fff;box-shadow:0 1px 2px #ccc;}
	.gn_logobox{display:flex;justify-content:center;align-items:center;height:60px;}
	.gn_logobox img{max-height:76px;}
	.gn_asidebtn{display:block;width:100%;margin:0px auto;padding:10px 0;text-align:center;color:#01d39a;}
	.el-menu-vertical-demo:not(.el-menu--collapse){width:180px;min-height:400px;}
	.el-menu-item-group__title{display:none;}
	.gn_aside .el-submenu .el-menu-item{min-width:180px;}
	.el-menu--collapse .el-submenu__title span{display: none;}
	/*gm滚动条样式gm*/
	::-webkit-scrollbar{width: 5px;height: 8px;background-color:#fafafa;}
	::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #fafafa;}
	::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #aaa;}
</style>
